<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="../../js/echarts.min.js"></script>
</head>
<body>
	<div style="width: 100%; margin-top: -210px; over; position: fixed;">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 1000px; height: 950px;"></div>
	</div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		var option = {
			tooltip : {
				formatter : "{a} <br/>{c} {b}"
			},
			toolbox : {
				show : true,
				feature : {
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			series : [
					{
						name : '氧气浓度',
						type : 'gauge',
						z : 3,
						min : -5,
						max : 45,
						splitNumber : 10,
						radius : '50%',
						axisLine : { // 坐标轴线
							lineStyle : { // 属性lineStyle控制线条样式
								width : 10
							}
						},
						axisTick : { // 坐标轴小标记
							length : 15, // 属性length控制线长
							lineStyle : { // 属性lineStyle控制线条样式
								color : 'auto'
							}
						},
						splitLine : { // 分隔线
							length : 20, // 属性length控制线长
							lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
								color : 'auto'
							}
						},
						axisLabel : {
							backgroundColor : 'auto',
							borderRadius : 2,
							color : '#eee',
							padding : 3,
							textShadowBlur : 2,
							textShadowOffsetX : 1,
							textShadowOffsetY : 1,
							textShadowColor : '#222'
						},
						title : {
							// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							fontWeight : 'bolder',
							fontSize : 16,
						// fontStyle: 'italic'
						},
						detail : {
							// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							formatter : function(value) {
								value = (value + '').split('.');
								value.length < 2 && (value.push('00'));
								return ('00' + value[0]).slice(-2) + '.'
										+ (value[1] + '00').slice(0, 2);
							},
							fontWeight : 'bolder',
							borderRadius : 3,
							backgroundColor : '#444',
							borderColor : '#aaa',
							shadowBlur : 5,
							shadowColor : '#333',
							shadowOffsetX : 0,
							shadowOffsetY : 3,
							borderWidth : 2,
							textBorderColor : '#000',
							textBorderWidth : 2,
							textShadowBlur : 2,
							textShadowColor : '#fff',
							textShadowOffsetX : 0,
							textShadowOffsetY : 0,
							fontFamily : 'Arial',
							width : 100,
							color : '#eee',
							rich : {}
						},
						data : [ {
							value : 20,
							name : '氧气浓度（℃）'
						} ]
					}, {
						name : '二氧化氮浓度',
						type : 'gauge',
						center : [ '20%', '46%' ], // 默认全局居中
						radius : '35%',
						min : -5,
						max : 45,
						startAngle : 270,
						endAngle : 45,
						splitNumber : 10,
						axisLine : { // 坐标轴线
							lineStyle : { // 属性lineStyle控制线条样式
								width : 8
							}
						},
						axisTick : { // 坐标轴小标记
							length : 12, // 属性length控制线长
							lineStyle : { // 属性lineStyle控制线条样式
								color : 'auto'
							}
						},
						splitLine : { // 分隔线
							length : 20, // 属性length控制线长
							lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
								color : 'auto'
							}
						},
						pointer : {
							width : 5
						},
						title : {
							offsetCenter : [ 0, '-30%' ], // x, y，单位px
						},
						detail : {
							// 其余属性默认使用全局文本样式，详见TEXTSTYLE
							fontWeight : 'bolder'
						},
						data : [ {
							value : 17,
							name : 'CO2（℃）'
						} ]
					}, {
						name : '磷化氢浓度',
						type : 'gauge',
						center : [ '80%', '46%' ], // 默认全局居中
						radius : '35%',
						min : -5,
						max : 45,
						startAngle : 135,
						endAngle : -90,
						splitNumber : 10,
						axisLine : { // 坐标轴线
							lineStyle : { // 属性lineStyle控制线条样式
								width : 8
							}
						},
						axisTick : { // 坐标轴小标记
							length : 12, // 属性length控制线长
							lineStyle : { // 属性lineStyle控制线条样式
								color : 'auto'
							}
						},
						splitLine : { // 分隔线
							length : 20, // 属性length控制线长
							lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
								color : 'auto'
							}
						},
						pointer : {
							width : 5
						},
						detail : {
							fontWeight : 'bolder'
						},
						data : [ {
							value : 12,
							name : 'PH3（℃）'
						} ]
					} ]
		};
		
		function callChild(o,c,p){
		   	option.series[0].data[0].value = o;
		   	option.series[1].data[0].value = c;
		   	option.series[2].data[0].value = p;
		   	
		   	myChart.setOption(option, true);
		};
		
		function getValue(name) {
	        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	        var r = window.location.search.substr(1).match(reg);
	        if (r != null) return unescape(r[2]);  
	        return null;  
	    };
	    
	    var value = getValue("o");
		if(value) option.series[0].data[0].value = value;
		value = getValue("c");
		if(value) option.series[1].data[0].value = value;
		value = getValue("p");
		if(value) option.series[2].data[0].value = value;
		
		if(value){
			myChart.setOption(option, true);
		}
	</script>
</body>
</html>